<!-- 流程 -->
<template>
    <div class="steps">
        <el-row v-show="isshows" class="wq">
            <el-col :span="24">
                <div class="stepsContent">
                    <img v-show="navIndex == 3" src="../../assets/image/ku.png" alt="" />
                    <img v-show="navIndex != 3" src="../../assets/image/xiao.png" alt="" />
                    <p :class="[{ redss: navIndex == 3 }, 'a']">{{ test }}</p>
                </div>
                <div class="flex" style="padding:80px 1%;">
                    <div>
                        <div class="conter">
                            <p
                                class="nub"
                                :class="[
                                    {
                                        blue: navIndex == 0 || navIndex == 1 || navIndex == 2
                                    },
                                    'gray'
                                ]"
                            >
                                1
                            </p>
                            <div class="cont">
                                <p>提交资质</p>
                                <p>完善企业资质信息</p>
                            </div>
                        </div>
                        <router-link to="/company/userinfo" :class="[{ pointerEvents: disabled != false }, 'a']">
                            <el-button class="btn" :class="[{ 'gray grays': disabled != false }, 'a']" v-show="navIndex == '0'" :disabled="disabled">开始填写</el-button>
                        </router-link>
                    </div>
                    <p class="xian" :class="[{ blue: navIndex == 1 || navIndex == 2 }, 'gray']"></p>
                    <div>
                        <div class="conter">
                            <p
                                class="nub"
                                :class="[
                                    {
                                        blue: navIndex == 1 || navIndex == 2 || navIndex == 3
                                    },
                                    'gray'
                                ]"
                            >
                                2
                            </p>
                            <div class="cont">
                                <p :class="[{ grays: navIndex < 1 }, 'a']">
                                    等待审核
                                </p>
                                <p>
                                    等待客服审核
                                </p>
                            </div>
                        </div>
                        <router-link to="/company/userinfo"><el-button class="btn" v-show="navIndex == '1'">查看详情</el-button></router-link>
                        <router-link to="/company/userinfo">
                            <el-button class="btn" v-show="navIndex == '3'" :class="[{ reds: navIndex == 3 }, 'a']">重新提交</el-button>
                        </router-link>
                    </div>
                    <p class="xian" :class="[{ blue: navIndex == 2 }, 'gray']"></p>
                    <div>
                        <div class="conter">
                            <p class="nub" :class="[{ blue: navIndex == 2 }, 'gray']">
                                3
                            </p>
                            <div class="cont">
                                <p
                                    :class="[
                                        {
                                            grays: navIndex < 2
                                        },
                                        'a'
                                    ]"
                                >
                                    通过审核
                                </p>
                                <p>企业资质审核已通过</p>
                            </div>
                        </div>
                        <!-- <el-button class="btn" v-show="navIndex=='2'">开始填写</el-button> -->
                    </div>
                    <p class="xian" :class="[{ blue: navIndex == 2 }, 'gray']"></p>
                    <div>
                        <div class="conter">
                            <p class="nub" :class="[{ blue: navIndex == 2 }, 'a']">
                                4
                            </p>
                            <div class="cont">
                                <p
                                    :class="[
                                        {
                                            grays: navIndex < 2
                                        },
                                        'a'
                                    ]"
                                >
                                    同步店铺
                                </p>
                                <p>开始您的奢批之旅吧</p>
                            </div>
                        </div>
                        <router-link to="/dianpu/shop"><el-button class="btn" v-show="navIndex == '2'">添加店铺</el-button></router-link>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getInfo } from '@/api/login';
export default {
    name: 'steps',
    data() {
        return {
            test: '您需要完善企业资质信息才可进行下一步操作',
            isshow: false, // true ：哭  false ：笑
            navIndex: 0, //标志位_背景颜色
            disabled: false,
            isshows: false
        };
    },
    created() {
        getInfo().then(res => {
            if (res.roles[0] != "common") {
                return;
            }
            // this.navIndex = 3;
            // 认证状态 0未提交 1 提交审核 2 认证通过 3 认证不通过',
            this.$store.state.user.toPath = res.ApplyStatus;
            this.$store.state.user.hasShop = res.hasShop;
            localStorage.userId = res.ApplyStatus;
            this.navIndex = res.ApplyStatus;
            // this.navIndex = 0;

            switch (this.navIndex) {
                case 0:
                    this.test = '您需要完善企业资质信息才可进行下一步操作';
                    this.$emit('showb');
                    break;
                case 1:
                    this.test = '等待管理员审核中';
                    this.$emit('showb');
                    break;
                case 2:
                    this.test = '审核完成，去同步店铺吧';
                    this.$emit('showb');
                    break;
                case 4:
                    this.$router.push({ path: '/qudao/suserinfo' });
                    break;
                default:
                    this.test = '审核失败';
                    this.$emit('showb');
                    break;
            }
            if (this.navIndex == 2 && res.hasShop == true) {
                this.$emit('on', 'yes');
                this.isshows = false;
            } else {
                this.$emit('ons', 'yes');
                this.isshows = true;
            }
        });
    },
    methods: {}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.stepsContent {
    text-align: center;
    margin-top: 150px;
}
.stepsContent > p {
    height: 24px;
    font-size: 24px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: rgba(94, 142, 187, 1);
    line-height: 36px;
}
.wq {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    background: #ffffff;
    z-index: 233;
    overflow-y: hidden;
    padding-left: 20px;
    margin-left: -20px;
}
.steps .nub {
    width: 87px;
    height: 87px;
    background: #e0e0e0;
    border-radius: 50%;
    text-align: center;
    line-height: 87px;
    text-align: center;
    font-size: 42px;
    font-weight: 600;
    color: #ffffff;
    float: left;
    margin: 0;
}
.steps .xian {
    width: 6%;
    height: 2px;
    background: rgba(223, 223, 223, 1);
    margin: 50px 1%;
}
.steps .cont {
    width: 48.5%;
    margin-left: 3%;
    float: left;
}
.steps .conter {
    overflow: hidden;
}
.steps .conter::after {
    display: block;
    height: 0;
    visibility: hidden;
    content: '.';
}
.steps .cont > p:nth-child(1) {
    font-size: 22px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 33px;
    margin: 5px 0 0 0;
}
.steps .cont > p:nth-child(2) {
    margin: 10px 0 0 0;
    font-size: 18px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: rgba(136, 136, 136, 1);
    line-height: 20px;
}
.steps .btn {
    width: 121px;
    height: 51px;
    background: rgba(23, 143, 255, 1);
    border-radius: 26px;
    margin: 15px 0 0 96px;
    color: #ffffff;
}
/*  颜色 */
.steps .gray {
    background: #e0e0e0;
}
.steps .btn.gray:hover {
    background: #e0e0e0;
    color: #b4b4b4;
}
.steps .btn.grays {
    color: #b4b4b4;
}

.steps .blue {
    background: rgba(23, 143, 255, 1);
}

.steps p.grays {
    color: #b4b4b4 !important;
}
.pointerEvents {
    pointer-events: none;
}
.reds {
    background: #e94b4b !important;
    color: #ffffff;
}
.redss {
    color: #e94b4b !important;
}
</style>
